<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="bookmark" type="image/x-icon" href="favicon.ico" />
    <link rel="shortcut icon" href="favicon.ico">
    <title>网易云音乐</title>

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script src="./bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="./css/head.css">
    <style>
        .mynavbar {
            background-color: #242424 !important;
            /* 尽量不要设置大盒子的高度,大盒子的高度使用内容撑开 */
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .mynavbar .navbar-brand {
            height: 70px;
            background: url(./images/topbar.png) no-repeat 0 0px;
            width: 157px;
            font-size: 0;
        }
        
        .mynavbar .navbar-nav .nav-link {
            padding: 0 19px;
            display: block;
            height: 70px;
            line-height: 70px;
            color: #cccccc;
            font-size: 14px;
            /* 相对定位 */
            position: relative;
        }
        
        .mynavbar .navbar-nav .nav-link .icon_arrow {
            background: url(images/topbar.png) no-repeat -226px 0;
            width: 12px;
            height: 6px;
            position: absolute;
            left: 50%;
            margin-left: -6px;
            bottom: 0;
        }
        
        .mynavbar .navbar-nav .nav-link .icon_hot {
            background: url(images/topbar.png) no-repeat -192px 0;
            width: 26px;
            height: 13px;
            position: absolute;
            right: -18px;
            top: 22px;
        }
        
        .mynavbar .navbar-nav .nav-link:hover,
        .mynavbar .navbar-nav .nav-link:focus {
            color: #ffffff;
            background: #000000;
        }
        
        .mynavbar .navbar-nav .show>.nav-link,
        .mynavbar .navbar-nav .active>.nav-link,
        .mynavbar .navbar-nav .nav-link.show,
        .mynavbar .navbar-nav .nav-link.active {
            color: #ffffff;
            background: #000000;
        }
        
        .mynavbar .form-inline {
            position: relative;
        }
        
        .mynavbar .form-inline .form-control {
            padding: 0;
            width: 162px;
            padding-left: 32px;
            height: 32px;
            border-radius: 20px;
            font-size: 12px;
            border: 0;
        }
        
        .mynavbar .form-inline .form-control::-webkit-input-placeholder {
            color: #9b9b9b;
        }
        
        .mynavbar .form-inline::after {
            content: "";
            position: absolute;
            left: 10px;
            top: 12px;
            background: url(images/topbar.png) no-repeat -10px -108px;
            width: 13px;
            height: 14px;
        }
        
        .mynavbar .form-inline .form-control:focus {
            border: 0;
            box-shadow: 0 0 0 0.2rem transparent;
        }
        
        .mynavbar .form-inline .btn {
            width: 88px;
            height: 30px;
            padding: 9px 17px;
            font-size: 12px;
            padding: 0;
            color: #cccccc;
            border-radius: 20px;
            border-color: #4f4f4f;
        }
        
        .mynavbar .form-inline .btn:hover {
            color: #fff;
            background-color: transparent;
            border-color: #cccccc;
        }
        
        .mynavbar .login {
            margin-left: 18px;
            font-size: 12px;
            color: #787878;
        }
        
        .mynavbar .login:hover {
            color: #777777;
            text-decoration: underline;
        }
        
        .mynavbar .navbar-toggler {
            background: white;
        }
        
        .mynavbar button:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar">
        <!-- 响应式容器 -->
        <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">发现音乐
                            <span class="sr-only">(current)</span>
                            
                            <!-- 箭头图标 -->
                            <span class="icon_arrow d-none d-xl-block"></span>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">我的音乐</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">朋友</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">商城</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">音乐人</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">下载客户端
                            <!-- 热门图标 -->
                            <span class="icon_hot d-none d-xl-block"></span>
                        </a>
                    </li>
                </ul>

                <form class="form-inline my-2 my-lg-0 d-none d-xl-block">
                    <input class="form-control mr-sm-2" type="search" placeholder="音乐/视频/电台/用户" aria-label="Search">
                    <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">创作者中心</button>
                </form>

                <a href="#" class="login">登录</a>

            </div>
        </div>

    </nav>

    <div class="min_bar">
        <div class="container">
            <ul class="minbar_list">

                <li><a href="#" class="active"> 推荐</a></li>
                <li><a href="#"> 排行榜</a></li>
                <li><a href="#"> 歌单</a></li>
                <li><a href="#"> 主播电台</a></li>
                <li><a href="#"> 歌手</a></li>
                <li><a href="#"> 新碟上架</a></li>
            </ul>
        </div>
    </div>
    <script>
    </script>
    <div class="rotation">

        <div class="center">
            <div class="left">
                <ul>
                    <li>
                        <a href="#"><img src="images/lunbotu07.jpg" /></a>
                    </li>
                    <li>
                        <a href="https://music.163.com/#/song?id=1893975439"><img src="images/lunbotu01.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu02.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu03.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu04.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu05.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu06.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu07.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lunbotu01.jpg" /></a>
                    </li>
                </ul>
            </div>
            <!-- <div class="btns"> -->
            <span class="btn_lt"></span>
            <span class="btn_rt"></span>
            <!-- </div> -->
            <div class="suoyin">
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

            <div class="right">
                <p class="download">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
        </div>


    </div>
    <script src="./js/head.js"></script>
</body>

</html>